import React,{Component} from 'react'
import './button.css'

export default class Button extends Component{

addRippleEffect=(e)=> {
    if(this.props.onClick){
        this.props.onClick();
    }
        var target = e.target;  
        if (target.className.toLowerCase() !== 'btn') return false;  
        var rect = target.getBoundingClientRect();  
        var ripple = target.querySelector('.ripple');  
        if (!ripple) {  
            ripple = document.createElement('span');  
            ripple.className = 'ripple'  
            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'  
            target.appendChild(ripple);  
        }  
        ripple.classList.remove('show');  
        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;  
        var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;  
        ripple.style.top = top + 'px'  
        ripple.style.left = left + 'px'  
        ripple.classList.add('show');  
        return false;  
    }  
    render(){
        return(
            <button className="btn" onClick={this.addRippleEffect} style={this.props.datastyle} disabled={this.props.disabled}>{this.props.children}</button>  
        )
    }
}
//button的点击效果，样式用style传值，父属性是datastyle,可直接在父元素上onclick